<template>
  <el-form label-width="80px">
    <el-form-item label="SKU名称">
      <el-input v-model="sku.skuName" />
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input-number
        v-model.number="sku.price"
        controls-position="right"
        :min="0"
      />
    </el-form-item>
    <el-form-item label="重量(克)">
      <el-input-number
        v-model.number="sku.weight"
        controls-position="right"
        :min="0"
      />
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input
        v-model="sku.skuDesc"
        type="textarea"
        placeholder="请输入SKU描述"
      />
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true" class="form-inline">
        <el-form-item
          v-for="attr in skuAttrList"
          :key="attr.id"
          :label="attr.attrName"
          style="width: 200px"
        >
          <el-select v-model="attr.attrValue" placeholder="请选择">
            <el-option
              v-for="attrInfo in attr.attrValueList"
              :key="attrInfo.id"
              :label="attrInfo.valueName"
              :value="attrInfo.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true" class="form-inline">
        <el-form-item
          v-for="saleAttr in skuSaleAttrList"
          :label="saleAttr.saleAttrName"
          style="width: 200px"
        >
          <el-select v-model="saleAttr.saleAttrValue" placeholder="请选择">
            <el-option
              v-for="saleAttrInfo in saleAttr.spuSaleAttrValueList"
              :key="saleAttrInfo.id"
              :label="saleAttrInfo.saleAttrValueName"
              :value="saleAttrInfo.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片列表">
      <el-table
        border
        :data="tableData"
        highlight-current-row
        ref="tableRef"
        @current-change="defineDefaultImg"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column label="图片" prop="imgUrl" width="120" align="center">
          <template #="{ row }">
            <img :src="row.imgUrl" :alt="row.imgName" style="width: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName" />
        <el-table-column label="操作" width="150" align="center">
          <template #="{ row }">
            <el-button type="success" v-if="row.isDefault">默认图片</el-button>
            <el-button type="warning" v-else>设为默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="saveSku">保存</el-button>
      <el-button @click="closeSku">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import {
  getAttrInfoList,
  getSpuImageList,
  getSpuSaleAttrList,
  addSku
} from '@/api/product/spu'
import useCategoryStore from '@/store/modules/category'
import { ElMessage } from 'element-plus'
const emit = defineEmits(['closed'])
const closeSku = () => {
  emit('closed')
}
const sku = reactive({
  skuName: '',
  price: 0,
  skuDesc: '',
  weight: 0,
  skuDefaultImg: '',
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
  tmId: '',
  category3Id: '',
  spuId: ''
})
const skuAttrList = ref<any[]>([])
const skuSaleAttrList = ref<any[]>([])
const tableData = ref<any[]>([])
const tableRef = ref()
const defineDefaultImg = (row: any) => {
  sku.skuDefaultImg = row.imgUrl
  tableData.value.forEach((item) => {
    item.isDefault = 0
  })
  row.isDefault = 1
}

const { category1Id, category2Id, category3Id } = toRefs(useCategoryStore())
const getSkuInfo = async (spuData: any) => {
  Object.assign(sku, {
    skuName: '',
    price: 0,
    skuDesc: '',
    weight: 0,
    skuDefaultImg: '',
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
    tmId: spuData.tmId,
    category3Id: spuData.category3Id,
    spuId: spuData.id
  })

  await getAttrInfoList(
    category1Id.value,
    category2Id.value,
    category3Id.value
  ).then((res) => {
    if (res.code === 200) skuAttrList.value = res.data
  })

  await getSpuImageList(spuData.id).then((res) => {
    if (res.code === 200) tableData.value = res.data
  })

  await getSpuSaleAttrList(spuData.id).then((res) => {
    if (res.code === 200) skuSaleAttrList.value = res.data
  })
}

defineExpose({ getSkuInfo })

const saveSku = async () => {
  sku.skuAttrValueList = skuAttrList.value.reduce((prev, next) => {
    if (next.attrValue) prev.push({ attrId: next.id, valueId: next.attrValue })
    return prev
  }, [])

  sku.skuSaleAttrValueList = skuSaleAttrList.value.reduce((prev, next) => {
    if (next.saleAttrValue)
      prev.push({ saleAttrId: next.id, saleAttrValueId: next.saleAttrValue })
    return prev
  }, [])
  await addSku(sku).then((res) => {
    if (res.code === 200) {
      closeSku()
      ElMessage.success('保存成功')
    } else {
      ElMessage.error('保存失败')
    }
  })
}
</script>

<style lang="scss" scoped>
.form-inline {
  :deep(.el-input) {
    --el-input-width: 220px;
  }

  :deep(.el-select) {
    --el-select-width: 220px;
  }
}
</style>
